<template>
	<div class="bigbox">
		<a-row class="top">
			<a-col :span="8" class="left">
				<div class="dis-tool">
					<div class="one">
						<span class="switch switch-on" @click="changeDistype(0)"
							:style="{ color: mainStore.disTypeteamwork == 0 ? 'white' : '#4B4D54' }">已派发</span>
						<span class="switch switch-off" @click="changeDistype(1)"
							:style="{ color: mainStore.disTypeteamwork == 1 ? 'white' : '#4B4D54' }">已接收</span>
						<span
							:class="mainStore.disTypeteamwork == 1 ? 'switch-thumb transition-200ms' : 'switch-thumb'"></span>
					</div>
				</div>
			</a-col>
			<a-col :span="8" class="center color_413a50" v-if="show">
				共{{ dataList.length }}条数据
			</a-col>
			<a-col :span="8" class="right color_6f6d9d" v-if="show || searchValue.length > 0">
				<!-- 搜索 -->
				<div class="sousuoxin">
					<a-input autocomplete='off' id="sousuoinp" :class="sousuo ? 'inpxin' : ''"
						v-model:value="searchValue" placeholder="搜索项目名称" />
					<div class="searchclass" @click="sousuoFn"
						:style="{ background: sousuo ? '#686CE8' : '#ffffff', color: sousuo ? '#ffffff' : '' }">
						<i class="appIcon-iconfont appIcon-sousuo"></i>
					</div>
				</div>
				<div class="list_chart" @click="changetype(1)" v-if="type == 1">
					<i class="appIcon-iconfont appIcon-tubiaozhanshi"></i>
				</div>
				<div class="list_chart" @click="changetype(2)" v-else>
					<i class="appIcon-iconfont appIcon-liebiaozhanshi"></i>
				</div>
			</a-col>
		</a-row>
		<!-- 图表模式 -->
		<div class="classlist" v-if="type == 1 && show">
			<ul>
				<!-- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;"> -->
				<li v-for="(item, index) in dataList" :key="index"
					:class="`animate__animated animate__fadeInUp animate__delay-0${index % 5}s`"
					:style="`height:${height}px`">
					<div class="box conentbox" :style="`background:${item.params.bgColor}`">
						<img :src="item.imageUrl" v-if="item.imageUrl" />
						<!-- <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox> -->
						<div class="view">
							<dd @click="toDetail(item.hhxsChartId, '1')"><i
									class="appIcon-iconfont appIcon-anliyulan color_a8b5d7"></i></dd>
						</div>
						<div class="edit">
							<a-popover trigger="hover" overlayClassName="popverclass">
								<!-- v-model:visible="morevisible" -->
								<dd>
									<i class="appIcon-iconfont appIcon-more color_a8b5d7"></i>
								</dd>
								<template #content>
									<div class="tips">
										<a-popover placement="leftTop" trigger="click" overlayClassName="shareLinks"
											@visibleChange="closeFn">
											<template #content>
												<h2>分享链接</h2>
												<div class="flex">
													<a-input disabled="false" v-model:value="fareurl" size="large"
														width="220px" />
													<dd class="linkCopy" @click="copyUrl">
														<i v-if="copyed" class="appIcon-iconfont appIcon-fuzhi"></i>
														<i v-else class="appIcon-iconfont appIcon-fuzhichenggong"></i>
													</dd>
												</div>
											</template>
											<dd @click="fare(item)">分享链接</dd>
										</a-popover>
										<!-- <dd>创建副本</dd> -->
										<!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                        <template #content>
                          <div class="downloadFlex">
                            <dd>下载(PPT)</dd>
                            <dd>下载(JPG)</dd>
                            <dd>下载(PDF)</dd>
                          </div>
                        </template>
                        <dd>移动到</dd>
                      </a-popover> -->
										<!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                      <template #content>
                        <div class="downloadFlex">
                          <dd>下载(PPT)</dd>
                          <dd>下载(JPG)</dd>
                          <dd>下载(PDF)</dd>
                        </div>
                      </template>
                      <dd>下载为</dd>
                    </a-popover> -->
										<dd @click="textFocus(index)" v-if="disType == 0">重命名</dd>
										<dd @click="deleteitem(item)">删除文件</dd>
									</div>
								</template>
							</a-popover>
						</div>
						<div class="mask" @click.self="toDetail(item.hhxsChartId, '0')"></div>
					</div>
					<dl class="name_inp">
						<a-input v-if="npmeInp == 'inpname_' + index" :id="'inpname_' + index" class="name_inp_inp"
							v-model:value="item.title" @blur="editTitle(item)" @focus="focusTitle(item)"
							maxlength="10" />
						<span v-else @click="textFocus(index)" class="inp_span">{{ item.title }}</span>
						<i v-if="npmeInp == null && disType == 0"
							class="appIcon-iconfont appIcon-bianji inp_icon color_a8b5d7" @click="textFocus(index)"></i>
					</dl>
					<dl class="head_portrait" @click="mainStore.distributemore = true">
						<span v-for="(sub_item, sub_index) in list.length > 5 ? list.slice(0, 5) : list"
							:key="sub_index" :style="{ 'z-index': list.length - sub_index }">
							<!-- <img src="../image/huishouzhan.png" alt=""> -->
						</span>
						<!-- 超过5个时显示 -->
						<div v-if="list.length > 5" class="head_mask" :style="{ 'z-index': list.length + 1 }">+{{
						list.length - 5
						}}
						</div>
						<div class="new_distribution" v-if="disType == 0" @click="mainStore.distributemore = true">
							<i class="appIcon-iconfont appIcon-jiahao"></i>
						</div>
					</dl>
				</li>
			</ul>
		</div>
		<!-- 列表模式 -->
		<div class="classlist2" v-if="type == 2 && show">
			<ul>
				<!-- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;"> -->
				<li v-for="(item, index) in dataList" :key="index"
					:class="`animate__animated animate__fadeInUp animate__delay-0${index % 10}s`">
					<a-col :span="8">
						<div class="box">
							<img :src="item.imageUrl" v-if="item.imageUrl"
								@click.stop="toDetail(item.hhxsChartId, '1')" />
							<img src="https://picsum.photos/id/11/10/6" v-else
								@click.stop="toDetail(item.hhxsChartId, '1')" />
							<!-- <p @click="toDetail(item.hhxsChartId,'0')">{{item.title}}</p> -->
							<dl class="name_inp">
								<a-input v-if="npmeInp == 'inpname_type_' + index" :id="'inpname_type_' + index"
									class="name_inp_inp" @focus="focusTitle(item)" @blur="editTitle(item)"
									v-model:value="item.title" maxlength="10" />
								<span v-else @click="textFocus(index)" class="inp_span">{{ item.title }}</span>
								<i v-if="npmeInp == null && disType == 0"
									class="appIcon-iconfont appIcon-bianji inp_icon color_a8b5d7"
									@click="textFocus(index)"></i>
							</dl>
						</div>
					</a-col>
					<a-col :span="8" class="center" @click.self="toDetail(item.hhxsChartId, '0')">
						<dl class="head_portrait" @click="mainStore.distributemore = true">
							<span v-for="(sub_item, sub_index) in list.length > 5 ? list.slice(0, 5) : list"
								:key="sub_index" :style="{ 'z-index': list.length - sub_index }">
								<!-- <img src="../image/huishouzhan.png" alt=""> -->
							</span>
							<!-- 超过5个时显示 -->
							<div v-if="list.length > 5" class="head_mask" :style="{ 'z-index': list.length + 1 }">+{{
							list.length - 5
							}}
							</div>
						</dl>
					</a-col>
					<a-col :span="8">
						<div class="list_right">
							<div class="view">
								<dd @click="toDetail(item.hhxsChartId, '1')" class="anliyulanicon">
									<i class="appIcon-iconfont appIcon-anliyulan color_a8b5d7"></i>
								</dd>
							</div>
							<div class="edit">
								<a-popover overlayClassName="popverclass" trigger="hover" placement="leftTop">
									<!-- v-model:visible="morevisible" -->
									<dd>
										<i class="appIcon-iconfont appIcon-more color_a8b5d7"></i>
									</dd>
									<template #content>
										<div class="tips">
											<a-popover placement="leftTop" trigger="click" overlayClassName="shareLinks"
												@visibleChange="closeFn">
												<template #content>
													<h2>分享链接</h2>
													<div class="flex">
														<a-input v-model:value="fareurl" size="large" width="220px" />
														<dd class="linkCopy" @click="copyUrl">
															<i v-if="copyed" class="appIcon-iconfont appIcon-fuzhi"></i>
															<i v-else
																class="appIcon-iconfont appIcon-fuzhichenggong"></i>
														</dd>
													</div>
												</template>
												<dd @click="fare(item)">分享链接</dd>
											</a-popover>
											<!-- <dd @click="onCopyFile(item)">创建副本</dd> -->

											<!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                      <template #content>
                        <div class="downloadFlex">
                          <dd>下载(PPT)</dd>
                          <dd>移动弄</dd>
                          <dd>下载(PDF)</dd>
                        </div>
                      </template>
                      <dd>移动到</dd>
                    </a-popover> -->

											<!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                        <template #content>
                          <div class="downloadFlex">
                            <dd>下载(PPT)</dd>
                            <dd>下载(JPG)</dd>
                            <dd>下载(PDF)</dd>
                          </div>
                        </template>
                        <dd>下载为</dd>
                      </a-popover> -->

											<dd @click="textFocus(index)" v-if="disType == 0">重命名</dd>
											<dd @click="deleteitem(item)">删除文件</dd>
										</div>
									</template>
								</a-popover>
							</div>
						</div>
					</a-col>
				</li>
				<!-- </a-checkbox-group> -->
			</ul>
		</div>
		<!-- 无数据 -->
		<!-- <div class="none">暂无协作内容</div> -->
	</div>
	<DistributeMore @sureFn="sureFn"></DistributeMore>
</template>
<script lang="ts" setup>
import DistributeMore from "./DistributeMore.vue"
import { reactive, watch, onMounted, ref, nextTick } from "vue"
import request from "@/utils/request"
import { useRouter, useRoute } from 'vue-router'
import { getBoxWidth } from '@/hooks/useGlobalFun'
import { useMainStore, useSlidesStore } from '@/store'
import { copyText, readClipboard } from '@/utils/clipboard'
import { storeToRefs } from 'pinia'
import { message } from 'ant-design-vue'

const router = useRouter()
const mainStore = useMainStore()
const disType = ref(0) // 判断已派发已接收 0 已派发 1 已接收
const sousuo = ref<boolean>(false) // 是否显示搜索框
const type = ref(1) // 判断列表展示模式 1 图标模式 2 列表模式
const show = ref<boolean>(true) // 判断有无数据
let dataList: any = ref([]) // 数据存放
const npmeInp = ref<any>(null) // 判断是否点击重命名
const morevisible = ref<boolean>(false) // 点击按钮后关闭弹出层
const copyed = ref<boolean>(true) // 判断是否复制
const fareurl = ref<string>('') // 链接地址
const searchValue = ref('') // 搜索框内容
const { globalEnv } = storeToRefs(mainStore)
const titleEditor = ref<boolean>(false)
let height = ref(250)

// !!!!
const list = reactive(['', '', '', '', '', '', '', ''])
// !!!!
// 判断已分享已接收
const changeDistype = (i: number) => {
	disType.value = i
	mainStore.$patch({ disTypeteamwork: i })
	// emits("changeType", i);
}
// 点击搜索事件
const sousuoFn = (event: any) => {
	sousuo.value = !sousuo.value
	if (sousuo.value) {
		document.getElementById('sousuoinp')?.focus()
	} else {
		searchValue.value = ''
	}
}
// 切换列表视图
const changetype = (val: number) => {
	val === 1 ? type.value = 2 : type.value = 1
	// type.value === 2 ? getBoxHeight() : ''
}
// 定义数据  !!!!!!
const page = reactive({
	current: 1,
	size: 1000
})
// 获取数据
const getDataList = () => {
	request.post(`/hhxs-ssc/sc/chart/recycleBinList`, {
		title: searchValue.value,
		size: page.size,
		current: page.current,
		// sort: true
		// orders: [{ asc: true, column: "" }]
	}).then((res: any) => {
		if (res.data.data.total === 0) {
			show.value = false
		} else {
			show.value = true
			dataList.value = res.data.data.records
		}
	})
}
// 点击进入编辑
const toDetail = (id: string, screen: string) => {
	router.push({
		path: '/freeeditor',
		query: {
			wid: id,
			screen: screen
		}
	})
}
// 删除一个
const deleteitem = (item: any) => {
	mainStore.$patch({
		del: true,
		deloneitem: item.hhxsChartId,
		deltype: 1
	})
}
// 点击名字重命名
const textFocus = (item: number) => {
	if (disType.value === 1) return
	if (type.value === 1) {
		npmeInp.value = 'inpname_' + item
		nextTick(() => {
			document.getElementById('inpname_' + item)?.focus()
			morevisible.value = false
		})
	} else {
		npmeInp.value = 'inpname_type_' + item
		nextTick(() => {
			document.getElementById('inpname_type_' + item)?.focus()
			morevisible.value = false
		})
	}
}
// 组件隐藏时执行回调函数
const closeFn = (a: boolean) => {
	if (!a) {
		setTimeout(() => {
			copyed.value = true
		}, 800)
	}
}
// 获取分享链接
const fare = (item: any) => {
	const url = `${globalEnv.value}/freeeditor/#/freeeditor?wid=${item.hhxsChartId}&screen=1`
	fareurl.value = url
}
// 复制链接
const copyUrl = () => {
	copyText(fareurl.value).then((res: any) => {
	})
	copyed.value = false
}
// 聚焦事件
const itemTitle = ref<any>('')
const focusTitle = (item: any) => {
	itemTitle.value = item.title
}
// 失焦事件
const editTitle = (item: any) => {
	if (item.title === '') {
		message.warn('标题不能为空')
		request.get(`/hhxs-ssc/sc/chart/getChartContent/${item.hhxsChartId}`)
			.then(res => {
				if (res.data.code === 200) {
					let params = res.data.data
					params.title = itemTitle.value
					request.post(`/hhxs-ssc/sc/chart/saveOrUpdate`, params).then(res => {
						if (res.data.code === 200) {
							// message.success('修改成功!')
							titleEditor.value = false
							npmeInp.value = null
							getDataList()
						}
					})
				}
			})
	} else {
		request.get(`/hhxs-ssc/sc/chart/getChartContent/${item.hhxsChartId}`)
			.then(res => {
				if (res.data.code === 200) {
					let params = res.data.data
					params.title = item.title

					request.post(`/hhxs-ssc/sc/chart/saveOrUpdate`, params).then(res => {
						if (res.data.code === 200) {
							message.success('修改成功!')
							titleEditor.value = false
							npmeInp.value = null
							getDataList()
						}
					})
				}
			})
	}
}
// 计算列表高度
const getBoxHeight = () => {
	const width = (getBoxWidth('.classlist') / 5) - 40
	height.value = (width * 208 / 248) + 90
}
//搜索--监听事件
watch(
	() => searchValue.value,
	(newValue, oldValue) => {
		getDataList()
	}
)
onMounted(async () => {
	await getDataList()
	getBoxHeight()
	window.addEventListener('resize', () => {
		type.value === 1 ? getBoxHeight() : ''
	})
})
// 分享成员点击确定后--关闭分享成员弹窗--调用接口--刷新列表
const sureFn = () => {
	mainStore.$patch({ distributemore: false }) // 关闭弹窗
}
</script>
<style lang="scss" scoped>
.bigbox {
	background: #fff;
	border-radius: 30px;
	height: calc(100% - 40px);
	padding: 20px 0;
	margin: 20px 20px 0 0;
	color: #7a8bbf;
	font-size: 18px;
}

.top {
	padding-right: 20px;

	.dis-tool {
		width: 200px;
		height: 42px;
		background: #fff;
		box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-left: 40px;
		display: flex;
		align-items: center;
		justify-content: center;

		.one {
			display: flex;
			position: relative;
			height: 42px;
			align-items: center;

			.switch {
				width: 100px;
				display: inline-block;
				z-index: 1;
				transition: all 0.5s;
				cursor: pointer;
				text-align: center;
			}

			.switch-thumb {
				position: absolute;
				background: #7a8eff;
				width: 97px;
				left: 0;
				height: 36px;
				transition: all 0.5s;
				border-radius: 10px;
				margin: 0 3px;
			}

			.transition-200ms {
				transform: translateX(97px);
			}
		}
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.right {
		display: flex;
		justify-content: flex-end;

		.sousuoxin {
			display: flex;
			// margin-right: 12px;
			align-items: center;
			position: relative;

			.ant-input {
				width: 0;
				height: 42px;
				border: none;
				margin-right: -42px;
				z-index: 3;
				border-radius: 21px;
				transition: all 0.5s ease-in-out;
			}

			.searchclass {
				width: 42px;
				height: 42px;
				background: #fff;
				border-radius: 21px;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 5;

				&:hover {
					box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
					border: 1px solid rgba(243, 243, 255, 1);
					color: #686ce8;
				}
			}

			.inpxin {
				width: 200px;
				height: 42px;
				padding: 0 42px 0 10px;
				box-shadow: 0 0 30px 0 rgba(104, 108, 232, 0.1);
			}
		}

		.list_chart {
			width: 42px;
			height: 42px;
			margin: 0 16px;
			background: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			&:hover {
				border: 1px solid rgba(243, 243, 255, 1);
				box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
				color: #686ce8;
			}
		}
	}
}

// 图表
.classlist {
	li {
		.box {
			height: calc(100% - 90px);
		}

		.name_inp {
			text-align: initial;
			height: 44px;

			.inp_span {
				font-size: 18px;
				margin-left: 10px;
			}
		}

		&:hover .new_distribution {
			color: #fff;
			background: rgba(243, 245, 255, 0.5);
		}
	}

	.box {
		height: calc(100% - 90px);
	}

	.head_portrait {
		display: flex;
		position: relative;

		span {
			width: 32px;
			height: 32px;
			// display: inline-block;
			border-radius: 50%;
			background-color: red;
			margin-left: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: -25px;
			border: 1px solid #fff;
			transition: all 0.3s;

			&:nth-child(1) {
				margin-left: 18px;
			}

			&:hover {
				margin-left: 25px;
			}
		}

		.head_mask {
			position: absolute;
			left: 18px;
			width: 32px;
			height: 32px;
			font-size: 14px;
			background-color: rgba(221, 191, 191, 0.3);
			border-radius: 50%;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.new_distribution {
			position: absolute;
			right: 18px;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: #f3f5ff;
			color: #afacc7;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


}

.classlist2 {
	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.head_portrait {
		display: flex;
		position: relative;

		span {
			width: 32px;
			height: 32px;
			// display: inline-block;
			border-radius: 50%;
			background-color: red;
			margin-left: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: -25px;
			border: 1px solid #fff;
			transition: all 0.3s;

			&:hover {
				margin-left: 25px;
			}
		}

		.head_mask {
			position: absolute;
			left: 15px;
			width: 32px;
			height: 32px;
			font-size: 14px;
			background-color: rgba(221, 191, 191, 0.3);
			border-radius: 50%;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>